
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Filter, Search } from "lucide-react";

interface CommunityFiltersProps {
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  selectedFilter: string;
  setSelectedFilter: (filter: string) => void;
  role: 'student' | 'teacher';
}

export const CommunityFilters = ({ 
  searchQuery, 
  setSearchQuery, 
  selectedFilter, 
  setSelectedFilter,
  role 
}: CommunityFiltersProps) => {
  return (
    <Card className="bg-white dark:bg-gray-800 shadow-sm border">
      <CardHeader>
        <CardTitle className="text-lg font-semibold flex items-center gap-2">
          <Filter className="w-5 h-5" />
          Discover Content
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="relative">
          <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
          <Input
            placeholder={role === 'teacher' ? "Search discussions and groups..." : "Search posts and groups..."}
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-10"
          />
        </div>
        <Select value={selectedFilter} onValueChange={setSelectedFilter}>
          <SelectTrigger>
            <SelectValue placeholder={role === 'teacher' ? "Filter by topic" : "Filter by subject"} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{role === 'teacher' ? "All Topics" : "All Subjects"}</SelectItem>
            {role === 'teacher' ? (
              <>
                <SelectItem value="teaching-practices">Teaching Practices</SelectItem>
                <SelectItem value="ai-education">AI in Education</SelectItem>
                <SelectItem value="classroom-challenges">Classroom Challenges</SelectItem>
                <SelectItem value="assessment">Assessment Strategies</SelectItem>
              </>
            ) : (
              <>
                <SelectItem value="math">Mathematics</SelectItem>
                <SelectItem value="science">Science</SelectItem>
                <SelectItem value="english">English</SelectItem>
                <SelectItem value="history">History</SelectItem>
                <SelectItem value="arts">Arts</SelectItem>
              </>
            )}
          </SelectContent>
        </Select>
      </CardContent>
    </Card>
  );
};
